<style scoped lang='less'>

    .home-page {
        overflow: scroll;
        .row {
            color: white;
        }

        background-color: #0B0F23;
        .mynav {
            list-style-type: none;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }

        .mynav li {
            float: left;
        }

        .mynav li a {
            text-align: center;
            width: 120px;
            display: block;
            text-decoration: none;
            color: #cccccc;
        }

        .mynav li a img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mypanel-title {
            background-color: #1A2351;
            background-repeat: round;
            background-size: cover;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            border: 1px solid #29387F;
            margin-top: 15px;
            color: white;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;

            .title-icon {
                width: 14px;
            }
        }

        .mypanel-content {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            border: 1px solid #29387F;
        }

        .mypanel-bottom {
            /*background: url('../../assets/image/panel_bottom.png');*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
        }

        .zhiban-content {
            height: 170px;
            width: 100%;
            overflow: auto;
        }

        .zhiban-content::-webkit-scrollbar { /*滚动条整体样式*/
            width: 0;
            height: 2px;
        }

        .zhiban-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #00698C;
        }

        .zhiban-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;

        }

        .zhiban-content {
            padding: 10px;
            /*display: flex;*/

            .zhiban-img {
                width: 50px;
                height: 80px;
                display: inline-block;
                margin-bottom: 10px;
            }
        }

        .new-content {
            padding: 20px 25px;
            min-height: 130px;

            .p-subtitle {
                width: 50%;
                display: inline-block;
            }

            .p-subtitle:hover {
                color: darkorange;
            }

        }

        .news-ul {
            margin-bottom: 0;
        }

        .odt {
            display: flex;

            .odt-head {
                width: 80px;
                height: 100px;
            }

            .odt-name {
                margin-top: 10px;
                font-size: 13px;
            }
        }

        .news-ul li {
            list-style-image: url('../../assets/image/li_icon.png');
            color: #cccccc;
            height: 30px;
            line-height: 30px;
            display: flex;
        }

        .news-ul .news-title {
            color: #337ab7;
            margin-left: 10px;
        }

        .my-progress {
            width: 100%;
            background-color: aquamarine;
            height: 10px;
        }

        .maxPp {
            width: 100%;
            margin: 10px 0;
        }

        .my-progress div {
            height: 10px;
            background-color: chocolate;
        }

        .five-line {
            display: flex;
            margin-bottom: 5px;

            .name {
                color: floralwhite;
                width: 12%;
                font-size: 12px;
            }

            .linear-text {
                width: 100%;
                display: flex;

                .linear {
                    height: 20px;
                    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    margin: 0 10px;
                }
            }
        }


        .six-liang {
            display: flex;
            /*border-bottom: 1px solid #f1f4f5;*/
            padding: 10px;
            flex-wrap: wrap;
            justify-content: center;

            .item {
                display: flex;
                width: 100%;
                padding: 10px;
                margin-bottom: 20px;
                justify-content: space-around;
                align-items: center;
                border-bottom: 1px solid white;

                .num {
                    color: #00a0e9;
                    font-weight: bolder;
                }
            }
        }

        .video-item {
            border: 1px solid #4c648e;
            text-align: center;
            padding: 5px 0;
            margin-top: 10px;
        }

        .video-html {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 90%;

            .video-shi {
                width: 45%;
                margin-left: 10px;
                margin-top: 20px;
            }
        }

        .badge-content {
            padding: 20px;
        }
    }
</style>
<template>
    <div style="position: fixed;top:0;bottom: 0;left: 0;right: 0;background-color: #0B0F23" class="home-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <!-- 左侧内容区 -->
                    <!-- 值班 -->
                    <div id="divZhiBan" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 值班编队
                        </div>
                        <div class="mypanel-content">
                            <div class="zhiban-content">
                                <div class="news-ul odt" id="newsList" style="padding-left:15px;">
                                    <template v-for="(item,index) in odtArr">
                                        <div style="text-align: center;margin-right: 20px">
                                            <div>
                                                <img class="odt-head" :src="apiUtil  + item.Photo"/>
                                            </div>
                                            <div class="odt-name">{{item.Displayname}}</div>
                                            <div class="odt-name">{{item.Teamduty}}</div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 值班 -->
                    <div id="restDay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 车辆情况
                        </div>
                        <div class="mypanel-content">
                            <div class="zhiban-content">
                                <div id="zhuangbei4" style="width: 200px;height: 200px"></div>
                            </div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 快捷访问 -->
                    <div id="divFastWay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 快捷访问
                        </div>
                        <div class="mypanel-content">
                            <ul style="padding-left: 18px;list-style-type: none;">
                                <li style="clear: both; height: 1px;"></li>
                                <li style="float: left; width: 140px; padding: 10px;"
                                    @click="jumpPage('','politicalAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/zhengongguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            政工管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;"
                                    @click="jumpPage('','AfterAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/houzhuangguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            后装管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','SafeAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/anquanguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            安全管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;">
                                    <a :href="oaUrl">
                                        <div class="text-center"><img src="../../assets/image/oahuiyiguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            办公OA
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','HolidayApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/qingjia.png"
                                                                      style="width: 35px; height: 35px;"></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            外出申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','DispatchCarApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/yongcheguanli01.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            车辆申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','home')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/guanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            进入管理后台
                                        </div>
                                    </a>

                                </li>
                            </ul>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <!-- 左侧内容区结束 -->
                </div>
                <div class="col-md-9 top-bg">
                    <img style="width: 100%" src="../../assets/image/big_top.png" alt="">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mypanel">
                                <div class="mypanel-title">
                                    <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 新闻
                                </div>
                                <div class="mypanel-content">
                                    <div class="new-content">
                                        <template v-for="(item,index) in noticeArr1">
                                            <div style="display: block;margin-bottom: 10px;font-size: 16px">
                                                <div>
                                                    <!--                                                    <img style="width: 25px" src="../../assets/image/list_icon_blue.png"-->
                                                    <!--                                                         alt="">-->
                                                    <a @click="jumpPage(item.Id,'NoticeDetail')"
                                                       class="p-subtitle">{{item.Subtitle}}</a>
                                                </div>

                                                <span style="font-size: 13px;color: rgb(153, 153, 153);display: inline-block;margin-left: 0px">创建 {{item.Createdate}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="mypanel-bottom"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mypanel">
                                <div class="mypanel-title">
                                    <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 通告
                                </div>
                                <div class="mypanel-content">
                                    <div class="new-content">
                                        <template v-for="(item,index) in noticeArr2">
                                            <div style="display: block;margin-bottom: 10px;font-size: 16px">
                                                <!--                                                <img style="width: 25px" src="../../assets/image/list_icon_green.png"-->
                                                <!--                                                     alt="">-->
                                                <a @click="jumpPage(item.Id,'NoticeDetail')"
                                                   class="p-subtitle">{{item.Subtitle}}</a>
                                                <span style="font-size: 13px;color: rgb(153, 153, 153);display: inline-block;margin-left: 0px">创建 {{item.Createdate}}</span>

                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="mypanel-bottom"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mypanel">
                                <div class="mypanel-title">
                                    <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt="">
                                    名社情
                                </div>
                                <div class="mypanel-content">
                                    <div class="new-content">
                                        <template v-for="(item,index) in noticeArr3">
                                            <div style="display: block;margin-bottom: 10px;font-size: 16px">
                                                <!--                                                <img style="width: 25px" src="../../assets/image/list_icon_yellow.png"-->
                                                <!--                                                     alt="">-->
                                                <a @click="jumpPage(item.Id,'NoticeDetail')"
                                                   class="p-subtitle">{{item.Subtitle}}</a>
                                                <span style="font-size: 13px;color: rgb(153, 153, 153);display: inline-block;margin-left: 0px">创建 {{item.Createdate}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="mypanel-bottom"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="display: flex;justify-content: space-around">


                    </div>
                    <div class="row">
                        <div class="col-md-12" style="text-align: center">
                            <div style="margin-right: 20px;display: inline-block">
                                营区状态
                                <i-switch style="margin: 0 10px" size="large">
                                    <span slot="open">常规</span>
                                    <span slot="close">战备</span>
                                </i-switch>
                            </div>
                            <ButtonGroup>
                                <Button @click="jumpPage('','MaterialInOutAction')" type="info">物资储备情况</Button>
                                <Button @click="showEcharType =3" type="success">训练情况</Button>
                                <Button @click="showEcharType=2" type="info">安防情况</Button>
                            </ButtonGroup>
                        </div>
                        <template v-if="showEcharType ==2" v-for="(item,index) in videoData">
                            <div style="text-align: center;margin-top: 20px">
                                <ButtonGroup>
                                    <Button style="margin-right: 10px" @click="cameraVideoData(item.Id)" type="success">
                                        {{item.Title}}
                                    </Button>
                                </ButtonGroup>
                            </div>
                        </template>
                        <div class="col-md-12">
                            <div class="mypanel" style="text-align: left">
                                <div v-show="showEcharType ==1" id="renyuan"
                                     style="width:550px;height:390px;display: inline-block;margin-top: 30px;"></div>
                                <div v-show="showEcharType ==3" id="zhuangbei3"
                                     style="width:550px;height:340px;display: inline-block;margin-top: 30px;"></div>
                                <div v-show="showEcharType ==2" class="video-html">
                                    <template v-for="(item,index) in cameraVideoArr">
<!--                                    <template v-for="(item,index) in 6">-->
                                        <videoPlayer style="margin-top: 20px;margin-right: 20px" class="vjs-custom-skin videoPlayer " :options="item.playerOptions" data-setup="{}" muted></videoPlayer>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

<!--        video-rtmp开始-->


        <!--        video-rtmp结束-->


        <!-- 新闻浏览对话框 -->
        <div id="newsView" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="newsTitle">[News Title]</h4>
                    </div>
                    <div class="modal-body">
                        <p>发布时间：<span id="newsPubDate">[PubDate]</span></p>
                        <p id="newsContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

    import apiUtil from '../../assets/utils/api_util';
    import homeNav from '../../components/homeNav';
    import 'video.js/dist/video-js.css'
    import {videoPlayer} from 'vue-video-player'
    import 'videojs-flash'
    export default {
        data() {
            return {
                // rtmp视频

                playerOptions: {
                    width:'420',
                    height: '290',
                    sources: [{
                        type: "rtmp/flv",
                        /*测试 rtmp://58.200.131.2:1935/livetv/hunantv*/
                        // src: "rtmp://202.69.69.180:443/webcast/bshdlive-pc"
                        src: "rtmp://58.200.131.2:1935/livetv/hunantv"
                    }],
                    techOrder: ['flash', 'html5'],// 兼容顺序
                    flash:{
                        hls: { withCredentials: false },
                        // swf:"../../static/js/video-js.swf"
                    },
                    autoplay: true,/*自动播放*/
                    controls: true,/*进度条*/
                },


                showEcharType: 3,//
                orgOptions: {},
                innerHeight: '',
                innerWidth: '',
                apiUtil: apiUtil.urls.baseUrl,
                //通知公告
                noticeArr1: [],
                noticeArr2: [],
                noticeArr3: [],
                //值班编队
                teamArr: [],
                //人员数据
                renYChartData: [],
                renYChartX: [],
                //战备状态
                previewArr: [],
                //提醒待办
                myMsgArr: [],
                //OA
                oaUrl: '',
                odtArr: '',
                //车辆在位
                onCarTotal: [],
                //人员情况
                onPeopleTotal: [],
                //训练统计数据
                trainingData: [],
                //监控分组
                videoData: [],
                //监控
                cameraVideoArr: [],
            }
        },
        mounted: function () {
            this.drawChart4();
        },
        components: {
            homeNav,
            videoPlayer
        },
        created: function () {
            this.getNoticeType0();
            this.getNoticeType1();
            this.getNoticeType2();
            this.getOAUrl();
            this.getOdtData();
            this.getOnDutyTotal();
            this.getOnCarTotal();
            this.getOnTrainingTotal();
            this.videoGroup();
        },

        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                this.$router.push(route);
            },
            //提醒待办详情
            getOAUrl: function (id) {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetOASystemLink, para, function (res) {
                    that.$Loading.finish();
                    that.oaUrl = res.Msg;
                });

            },
            //提醒待办详情
            jumpMsgDetail: function (id) {
                let that = this;

                let para = {
                    msgid: id,
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMyMsgDetail, para, function (res) {
                    that.$Loading.finish();
                    that.$Modal.confirm({
                        title: '详情',
                        content: res.Msg.Content,
                        onOk: () => {
                        },
                        onCancel: () => {
                        }
                    });
                });


            },
            onCancel: function () {

            },
            //新闻 type==0
            getNoticeType0: function () {
                let that = this;

                let para = {
                    curPage: 1,
                    pageSize: 3,
                    type: 0
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.NoticeList, para, function (res) {
                    that.$Loading.finish();
                    that.noticeArr1 = res.Msg.Arrays;
                });
            },
            //新闻 type==1
            getNoticeType1: function () {
                let that = this;

                let para = {
                    curPage: 1,
                    pageSize: 3,
                    type: 1
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.NoticeList, para, function (res) {
                    that.$Loading.finish();
                    that.noticeArr2 = res.Msg.Arrays;
                });
            },
            //新闻 type==2
            getNoticeType2: function () {
                let that = this;

                let para = {
                    curPage: 1,
                    pageSize: 3,
                    type: 2
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.NoticeList, para, function (res) {
                    that.$Loading.finish();
                    that.noticeArr3 = res.Msg.Arrays;
                });
            },
            //人员饼图统计
            drawChart(data) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("renyuan"));
                let that = this;

                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        textStyle: {
                            color: '#ffffff',
                        }
                    },
                    series: [
                        {
                            name: '人员在位情况',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '60%'],

                            label: {
                                position: 'inner'
                            },
                            labelLine: {
                                show: false
                            },
                            data: that.onPeopleTotal
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");

                // let data =this.genData();
                // 指定图表的配置项和数据


            },
            //训练统计图
            drawChart4() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei3"));
                let that = this;
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['日计划', '周计划', '半月计划', '月计划', '季度计划'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    series: [
                        {
                            name: '完成量',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ["#3398db", "#434348", "#90ed7d", "#f7a35c", "#61a0a8", "#61a0a8", "#91c7ae", "#2f4554"];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data: that.trainingData
                            // data: [342,465,654,334,223,234]
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            drawChart5() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei4"));
                let that = this;

                var seriesLabel = {
                    normal: {
                        show: true,
                        textBorderColor: '#333',
                        textBorderWidth: 2
                    }
                }
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除X轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏x轴
                            axisLine: {show: false},
                            axisLabel: {
                                textStyle: {
                                    color: '#030a40',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            data: ['送修', '借出', '在位', '集训'],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除y轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏y轴
                            axisLine: {show: false},
                            //  改变y轴字体颜色和大小
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    series: [
                        {
                            name: '车辆情况',
                            type: 'bar',
                            label: seriesLabel,
                            data: that.onCarTotal
                            // data: [44,32,54,63]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            /**
             * 新版数据
             */

            //获取值班编队

            getOdtData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListTeamMember, para, function (res) {
                    that.$Loading.finish();
                    that.odtArr = res.Msg;
                });
            },
            //训练情况
            getOnTrainingTotal: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OnTrainingTotal, para, function (res) {
                    that.$Loading.finish();
                    that.trainingData[0] = res.Msg.daylyCompeleteTotal;
                    that.trainingData[1] = res.Msg.wekklyCompeleteTotal;
                    that.trainingData[2] = res.Msg.halfMonthlyCompeleteTotal;
                    that.trainingData[3] = res.Msg.monthlyCompeleteTotal;
                    that.trainingData[4] = res.Msg.quartlyCompeleteTotal;
                    console.log('trainingData:', that.trainingData)
                    that.drawChart4();
                });
            },
            //人员在位情况
            getOnDutyTotal: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OnDutyTotal, para, function (res) {
                    that.$Loading.finish();
                    res.Msg.RestTotal.forEach(function (item, index) {
                        let itemSub = {
                            value: item.Value,
                            name: item.Title,
                        };
                        that.onPeopleTotal.push(itemSub)
                    });
                    that.drawChart();

                });
            },
            //监控分组
            videoGroup() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListGroup, para, function (res) {
                    that.$Loading.finish();
                    that.videoData = res.Msg;
                });
            },
            //监控
            cameraVideoData(id) {
                let that = this;

                let para = {
                    groupId: id
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListCamera, para, function (res) {
                    that.$Loading.finish();
                    that.cameraVideoArr = res.Msg;

                    that.cameraVideoArr.forEach(function (item,i) {
                        item.playerOptions= {
                            width:'420',
                            height: '290',
                            sources: [{
                                type: "rtmp/flv",
                                /*测试 rtmp://58.200.131.2:1935/livetv/hunantv*/
                                // src: "rtmp://202.69.69.180:443/webcast/bshdlive-pc"
                                src: item.Url
                            }],
                            techOrder: ['flash', 'html5'],// 兼容顺序
                            flash:{
                                hls: { withCredentials: false },
                                // swf:"../../static/js/video-js.swf"
                            },
                            autoplay: true,/*自动播放*/
                            controls: true,/*进度条*/
                        }
                    })
                    console.log('cameraVideoArr:',that.cameraVideoArr)

                });
            },
            //
            //车辆在位情况
            getOnCarTotal: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OnCarTotal, para, function (res) {
                    that.$Loading.finish();
                    // data: ['送修', '借出', '在位', '集训'],

                    console.log('res:', res);
                    that.onCarTotal[0] = res.Msg.Repair;
                    that.onCarTotal[1] = res.Msg.Out;
                    that.onCarTotal[2] = res.Msg.OnDuty;
                    that.onCarTotal[3] = res.Msg.Training;
                    console.log('that.onCarTotal:', that.onCarTotal);
                    that.drawChart5();
                });
            }

        }
    }
</script>
